<template>
	<view class="notifications-container">
		<!-- 页面头部 -->
		<view class="page-header">
			<text class="page-title">消息通知</text>
			<view class="header-actions">
				<view class="action-btn" @click="toggleEditMode">
					<text>{{ editMode ? '完成' : '编辑' }}</text>
				</view>
			</view>
		</view>

		<!-- 消息类型筛选 -->
		<view class="filter-tabs">
			<view v-for="tab in tabs" :key="tab.id" class="tab-item" :class="{ active: currentTab === tab.id }"
				@click="switchTab(tab.id)">
				<text class="tab-text">{{ tab.name }}</text>
				<view class="tab-badge" v-if="tab.badge > 0">{{ tab.badge }}</view>
			</view>
		</view>

		<!-- 消息列表 -->
		<view class="message-list" v-if="filteredMessages.length > 0">
			<view v-for="message in filteredMessages" :key="message.id" class="message-item"
				:class="{ unread: !message.read }">
				<view class="message-left">
					<view class="message-avatar">
						<image :src="message.avatar" class="avatar" mode="aspectFill"></image>
						<view class="message-type" :class="message.type"></view>
					</view>
				</view>

				<view class="message-content" @click="readMessage(message)">
					<view class="message-header">
						<text class="message-title">{{ message.title }}</text>
						<text class="message-time">{{ message.time }}</text>
					</view>
					<text class="message-desc">{{ message.content }}</text>
					<view class="message-extra" v-if="message.extra">
						<text class="extra-text">{{ message.extra }}</text>
					</view>
				</view>

				<view class="message-actions" v-if="editMode">
					<view class="action-icon delete" @click="deleteMessage(message.id)">
						<text>🗑️</text>
					</view>
				</view>
				<view class="unread-dot" v-else-if="!message.read"></view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<text class="empty-icon">🔔</text>
			<text
				class="empty-text">暂无{{ currentTab === 'all' ? '' : tabs.find(t => t.id === currentTab)?.name }}消息</text>
			<text class="empty-desc">快去发现更多精彩内容吧</text>
		</view>

		<!-- 批量操作栏 -->
		<view class="batch-actions" v-if="editMode && filteredMessages.length > 0">
			<view class="batch-select" @click="toggleSelectAll">
				<text class="select-icon">{{ selectAll ? '☑️' : '⬜' }}</text>
				<text class="select-text">全选</text>
			</view>
			<view class="batch-btns">
				<view class="batch-btn read-all" @click="markAllAsRead">
					<text>标记已读</text>
				</view>
				<view class="batch-btn delete-all" @click="deleteSelected">
					<text>删除</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 'all',
				editMode: false,
				selectAll: false,
				selectedMessages: new Set(),
				tabs: [{
						id: 'all',
						name: '全部',
						badge: 0
					},
					{
						id: 'like',
						name: '点赞',
						badge: 3
					},
					{
						id: 'comment',
						name: '评论',
						badge: 2
					},
					{
						id: 'follow',
						name: '关注',
						badge: 1
					},
					{
						id: 'system',
						name: '系统',
						badge: 0
					}
				],
				messages: [{
						id: 1,
						type: 'like',
						title: '用户小明',
						content: '点赞了你的视频《周末旅行日记》',
						time: '2分钟前',
						avatar: '/static/users/user1.png',
						read: false,
						extra: ''
					},
					{
						id: 2,
						type: 'comment',
						title: '视频爱好者',
						content: '评论了你的作品：这个视频拍得太棒了！期待更多作品！',
						time: '1小时前',
						avatar: '/static/users/user2.png',
						read: false,
						extra: ''
					},
					{
						id: 3,
						type: 'follow',
						title: '旅行达人',
						content: '关注了你',
						time: '3小时前',
						avatar: '/static/users/user3.png',
						read: true,
						extra: ''
					},
					{
						id: 4,
						type: 'system',
						title: '系统通知',
						content: '你的账号已在新的设备上登录，如非本人操作，请及时修改密码',
						time: '昨天',
						avatar: '/static/system-avatar.png',
						read: true,
						extra: '重要'
					},
					{
						id: 5,
						type: 'like',
						title: '美食博主',
						content: '点赞了你的视频《家常菜教程》',
						time: '2天前',
						avatar: '/static/users/user4.png',
						read: true,
						extra: ''
					}
				]
			}
		},
		computed: {
			filteredMessages() {
				if (this.currentTab === 'all') {
					return this.messages
				}
				return this.messages.filter(msg => msg.type === this.currentTab)
			}
		},
		methods: {
			switchTab(tabId) {
				this.currentTab = tabId
				this.selectedMessages.clear()
				this.selectAll = false
			},

			toggleEditMode() {
				this.editMode = !this.editMode
				if (!this.editMode) {
					this.selectedMessages.clear()
					this.selectAll = false
				}
			},

			readMessage(message) {
				if (!message.read) {
					message.read = true
					this.updateBadgeCount()
				}
			},

			deleteMessage(messageId) {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这条消息吗？',
					success: (res) => {
						if (res.confirm) {
							this.messages = this.messages.filter(msg => msg.id !== messageId)
							this.selectedMessages.delete(messageId)
							this.updateBadgeCount()
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							})
						}
					}
				})
			},

			toggleSelectAll() {
				this.selectAll = !this.selectAll
				if (this.selectAll) {
					this.filteredMessages.forEach(msg => {
						this.selectedMessages.add(msg.id)
					})
				} else {
					this.selectedMessages.clear()
				}
			},

			markAllAsRead() {
				if (this.selectedMessages.size === 0) {
					uni.showToast({
						title: '请先选择消息',
						icon: 'none'
					})
					return
				}

				this.messages.forEach(msg => {
					if (this.selectedMessages.has(msg.id)) {
						msg.read = true
					}
				})
				this.updateBadgeCount()
				uni.showToast({
					title: '标记成功',
					icon: 'success'
				})
			},

			deleteSelected() {
				if (this.selectedMessages.size === 0) {
					uni.showToast({
						title: '请先选择消息',
						icon: 'none'
					})
					return
				}

				uni.showModal({
					title: '确认删除',
					content: `确定要删除选中的 ${this.selectedMessages.size} 条消息吗？`,
					success: (res) => {
						if (res.confirm) {
							this.messages = this.messages.filter(msg => !this.selectedMessages.has(msg.id))
							this.selectedMessages.clear()
							this.selectAll = false
							this.updateBadgeCount()
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							})
						}
					}
				})
			},

			updateBadgeCount() {
				this.tabs.forEach(tab => {
					if (tab.id === 'all') {
						tab.badge = this.messages.filter(msg => !msg.read).length
					} else {
						tab.badge = this.messages.filter(msg => msg.type === tab.id && !msg.read).length
					}
				})
			}
		},
		onLoad() {
			this.updateBadgeCount()
		}
	}
</script>

<style scoped>
	.notifications-container {
		min-height: 100vh;
		background: #f5f5f5;
	}

	.page-header {
		background: white;
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.header-actions {
		display: flex;
		align-items: center;
	}

	.action-btn {
		padding: 12rpx 24rpx;
		background: #007AFF;
		color: white;
		border-radius: 20rpx;
		font-size: 24rpx;
	}

	.filter-tabs {
		background: white;
		display: flex;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		overflow-x: auto;
	}

	.tab-item {
		position: relative;
		padding: 16rpx 24rpx;
		margin-right: 20rpx;
		white-space: nowrap;
		display: flex;
		align-items: center;
	}

	.tab-item.active .tab-text {
		color: #007AFF;
		font-weight: 600;
	}

	.tab-text {
		font-size: 28rpx;
		color: #666;
		transition: all 0.3s;
	}

	.tab-badge {
		position: absolute;
		top: 8rpx;
		right: 8rpx;
		background: #ff3b30;
		color: white;
		font-size: 20rpx;
		padding: 4rpx 8rpx;
		border-radius: 20rpx;
		min-width: 24rpx;
		text-align: center;
		line-height: 1;
	}

	.message-list {
		padding: 20rpx;
	}

	.message-item {
		background: white;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: flex-start;
		position: relative;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.message-item.unread {
		background: #f8fbff;
		border-left: 4rpx solid #007AFF;
	}

	.message-left {
		margin-right: 24rpx;
	}

	.message-avatar {
		position: relative;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.message-type {
		position: absolute;
		bottom: -4rpx;
		right: -4rpx;
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		border: 2rpx solid white;
	}

	.message-type.like {
		background: #ff2d55;
	}

	.message-type.comment {
		background: #007AFF;
	}

	.message-type.follow {
		background: #34c759;
	}

	.message-type.system {
		background: #8e8e93;
	}

	.message-content {
		flex: 1;
	}

	.message-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 12rpx;
	}

	.message-title {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		flex: 1;
		margin-right: 20rpx;
	}

	.message-time {
		font-size: 24rpx;
		color: #999;
		flex-shrink: 0;
	}

	.message-desc {
		font-size: 28rpx;
		color: #666;
		line-height: 1.4;
		display: block;
		margin-bottom: 12rpx;
	}

	.message-extra {
		display: inline-block;
		padding: 8rpx 16rpx;
		background: #ff3b30;
		color: white;
		border-radius: 12rpx;
		font-size: 22rpx;
	}

	.message-actions {
		margin-left: 20rpx;
	}

	.action-icon {
		padding: 16rpx;
	}

	.action-icon.delete {
		color: #ff3b30;
	}

	.unread-dot {
		width: 16rpx;
		height: 16rpx;
		background: #007AFF;
		border-radius: 50%;
		margin-left: 20rpx;
		margin-top: 10rpx;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 40rpx;
		text-align: center;
	}

	.empty-icon {
		font-size: 120rpx;
		margin-bottom: 30rpx;
		opacity: 0.5;
	}

	.empty-text {
		font-size: 32rpx;
		color: #666;
		margin-bottom: 16rpx;
	}

	.empty-desc {
		font-size: 26rpx;
		color: #999;
	}

	.batch-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: white;
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1rpx solid #f0f0f0;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.batch-select {
		display: flex;
		align-items: center;
	}

	.select-icon {
		font-size: 32rpx;
		margin-right: 12rpx;
	}

	.select-text {
		font-size: 28rpx;
		color: #333;
	}

	.batch-btns {
		display: flex;
		gap: 20rpx;
	}

	.batch-btn {
		padding: 16rpx 32rpx;
		border-radius: 20rpx;
		font-size: 26rpx;
	}

	.batch-btn.read-all {
		background: #007AFF;
		color: white;
	}

	.batch-btn.delete-all {
		background: #ff3b30;
		color: white;
	}
</style>